import "./index.scss"
import {View, Text, Button} from "@tarojs/components"
import {observer} from "mobx-react"
import {useContext, useEffect, useState} from "react"
import Taro, {useDidHide, useDidShow, useRouter} from "@tarojs/taro"
import {setReportStore} from "./model"
import {uSelectDevReportConf} from "@/api/setting"
import {ReportConf} from "./components"
import {AtButton} from "taro-ui"

const Setreport = () => {
	let router = useRouter()
	const {updatePageQuery, pageQuery} = useContext(setReportStore)

	const [wxConf, setWxConf] = useState<Setting.ReportConf | undefined>(undefined)

	const [smsConf, setSmsConf] = useState<Setting.ReportConf | undefined>(undefined)

	const [isManage, setIsManage] = useState<"是" | "否" | undefined>("否")

	/**更新通知配置 */
	function updateReportConf() {
		pageQuery.devId &&
			uSelectDevReportConf({devId: pageQuery.devId})
				.then(res => {
					console.log(res.data)
					res.data.forEach((item, index) => {
						if (
							item.devReportIntervalTime == null ||
							item.devReportIntervalTime == undefined ||
							item.devReportIntervalTime == "" ||
							item.devReportIntervalTime < 2
						) {
							item.devReportIntervalTime = 2
						}
						if (index === 0) {
							console.log("微信报警已处理时段数据")
						} else if (index === 1) {
							console.log("短信报警已处理时段数据")
						}
					})

					if (!res.data || !res.data.length) {
						Taro.showModal({
							content: "暂无配置"
						})
						setWxConf(undefined)
						setSmsConf(undefined)
					} else {
						for (let i = 0; i < res.data.length; i++) {
							const conf = res.data[i]
							if (conf.devReportType === "0151") {
								setWxConf(conf)
							} else if (conf.devReportType === "0152") {
								setSmsConf(conf)
							}
						}
					}
				})
				.catch(err => {
					if (err && err.result == "error" && err.msg) {
						Taro.showModal({
							content: err.msg
						})
					} else {
						Taro.showModal({
							content: "报警配置获取失败"
						})
					}
					setWxConf(undefined)
					setSmsConf(undefined)
				})
	}

	// 可以使用所有的 React Hooks
	useEffect(() => {
		console.log("Setreport useEffect")
		setIsManage(pageQuery.isManage as any)
		updateReportConf()
	}, [pageQuery])

	// 对应 onShow
	useDidShow(() => {
		console.log("Setreport useDidShow")
		updatePageQuery(router.params)
	})
	// 对应 onHide
	useDidHide(() => {
		console.log("Setreport useDidHide")
	})

	return (
		<View className="container bg-xx_bg">
			<View className="h-full overflow-auto pb-64">
				<View className="hanzi text-16 font-bold mt-23 mb-14 px-16">
					报警设置
					{isManage !== "是" ? (
						<Text style="color:#f86a6b;">（非设备管理员不允许操作）</Text>
					) : null}
				</View>
				<View className="hanzi text-14 text-xx_text mb-14 px-16">
					设置当数据异常、设备异常时，向您报警汇报的次数和频率，我们将通过小程序订阅消息、短信向您报警汇报。
				</View>

				{wxConf ? (
					<ReportConf
						isManage={isManage}
						title="微信报警"
						conf={wxConf}
						onChange={updateReportConf}
						showOfficialAccounts={true}
						subTitle={
							<View className="text-12 text-xx_text font-normal">
								{/* 关注公众号后才能发送通知 */}
							</View>
						}
					></ReportConf>
				) : null}

				{smsConf ? (
					<ReportConf
						isManage={isManage}
						title="短信报警"
						conf={smsConf}
						onChange={updateReportConf}
					></ReportConf>
				) : null}
			</View>
		</View>
	)
}
export default observer(Setreport)
